<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>index</title>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
        integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">


    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>

</head>

<body>
    <form id="orderForm">
        <ul>
            <li>
                选择套餐：
                <select name="qcode_id">
                    {% for item in qcodeItems %}
                    <option value="{{item.qcode_id}}">{{item.qcode_name}}</option>
                    {% else %}
                    <option>无</option>
                    {% endfor %}
                </select>
            </li>
            <li>
                选择支付类型：
                <select name="type_id">
                    {% for item in typeItems %}
                    <option value="{{item.type_id}}">{{item.type_name}}</option>
                    {% else %}
                    <option>无</option>
                    {% endfor %}
                </select>
            </li>
            <li>
                <button type="submit">提交</button>
            </li>
        </ul>
    </form>
    <div>二维码图片【微信】：<img id="sqcodeUrl" src="" /></div>
    <div>支付状态：<span id="orderStatus"></span></div>
</body>
<script>

    //  查询订单状态轮询变量
    var orderInfoInterval = null;

    //  提交订单
    $('#orderForm').submit(function () {
        var form = $(this).serialize();
        $.post('/index/orderadd', form).then(function (res) {
            //
            if (res.errno === 0) {
                //  订单提交成功
                alert('订单提交成功');
                //  轮询订单状态  轮询时间每1秒 == 1000毫秒 查询一次
                orderInfoInterval = setInterval(function () {
                    //  查询订单状态
                    getOrderInfo(res.data.order_id);
                }, 5000);
                //  轮询超时  2分钟 == 2 * 60 * 1000 毫秒
                orderInfoIntervalTimeOut(2 * 60 * 1000);
                //  显示图片
                $('#sqcodeUrl').attr('src', res.data.sqcode_base64);
                //  其他业务可以写在这里
                //  业务代码
            } else {
                alert(res.errmsg || '订单提交成功');
            }
        });
        //  结束表单
        return false;
    });

    //  查询订单状态
    var getOrderInfo = function (order_id) {
        $.get('/index/orderinfo?order_id=' + order_id).then(function(res) {
            //  请求成功 且 定单状态 不为 未支付
            if (res.errno === 0 && res.data.order_status !== 0) {
                //  订单支付成功
                // alert('订单支付成功')
                //  停止轮询
                orderInfoInterval && clearInterval(orderInfoInterval);
                //  显示支付成功信息
                $('#orderStatus').text('订单支付成功');
                //  订单支付成功后其他业务可以写在这里
                //  其他业务代码
            }
        });
    }

    //  轮询超时
    var orderInfoIntervalTimeOut = function (ms) {
        setTimeout(function () {
            //  取消轮询
            orderInfoInterval && clearInterval(orderInfoInterval);
        }, ms);
    }
</script>

</html>